{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{% if customer %}
{% else %}
{{ 'customer.css' | asset_url | stylesheet_tag }}
{% endif %}
<style>
  .reward-register {
    margin: 0 !important; 
  }
  .refer-a-friend .bg_refer {
    background: #EFF2F3;
    position: relative;
    padding: 1px 0;
  }
  .tenways-refer{
      display: flex;
      align-items: center;
  }
  .tenways-refer>div{
      flex: 1;
  }
  .text-reward {
      font-size: 24px;
      line-height: 32px;
      font-weight: bold;
  }
  .text-reward p {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 133.333% */
    padding-top: 0;
  }
  .text-reward .left{
      font-size: 24px;
      line-height: 32px;
      max-width: 450px;
  }
  .text-reward .left .text{
      max-width: 350px;
  }
  .tenways-refer .refer-reward{
      max-width: 412px !important;
      background: #fff;
      padding: 20px 30px!important;
      border-radius: 12px;
  }
  .tenways-refer .text-reward{
      padding-right: 50px;
  }
  .tenways-refer .customer form {
      margin-top: 0;
      text-align: left;
  }
  .refer-reward .p{
      font-size: 16px;
      line-height: 24px;
      color: #000;
      margin-bottom: 20px;
  }
  .tenways-refer .field__label, 
  .tenways-refer .customer .field label{
      left: 0;
      color: #CCCCCC;
  }
  .tenways-refer .customer a{
      color: #2F80ED;
  }
  .tenways-refer .customer button {
    width: auto;
    box-shadow: none;
  }
  .refer-reward .right a{
    color: #2F80ED;
  }
  .refer-a-friend .accepts-marketing {
      align-items: flex-start;
      margin-top: 20px;
      color: #8D8D8D;
  }
  .refer-a-friend .accepts-marketing label{
      padding-left: 8px;
      font-size: 12px;
      line-height: 20px;
  }
  .refer-a-friend .customer .field {
      margin: 1.5rem 0 0;
  }

  .refer-a-friend .customer .field input{
      height: 40px;
  }
  .reward-program .main-page-title {
      font-weight: 600;
      font-size: 48px;
      line-height: 56px;
      text-align: center;
      padding-top: 40px;
  }

  .refer-a-friend .refer-reward .product-popup-modal__button {
    background: transparent;
    color: #2f80ed;
    height: auto;
    line-height: initial;
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-decoration: underline;
    min-width: auto;
    letter-spacing: -.015em;
  }
  .refer-a-friend .text-reward .left {
    max-width: 650px;
  }
  .refer-a-friend .text-reward .left .text {
    max-width: 650px;
    color: #FFF;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
  }
  
  .refer-a-friend .text-reward .left .desc {
    color: #FFF;
    /* 24px regular 32px */
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 133.333% */
  }
  
  .refer-rigester-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    margin: 0 auto;
    min-width: 1260px;
  }
  #refer-joinnow {
    padding-top: 90px;
    margin-top: -90px;
  }
  .tenways-refer__button {
    display: none;
  }
  .tenways-refer__button-logined {
    display: block;
  }
  .tenways-refer__button-logined .text-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .tenways-refer__button-logined .text-wrapper .text {
    color: #F4F8FC;
    text-align: center;
    /* 36px Bold 48px */
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 133.333% */
    padding-bottom: 30px;
  }
  
  .tenways-refer__button-logined .text-wrapper .button {
    background: #fff;
    color: #000;
    margin: 0 auto;
  }

 
  @media screen and (max-width: 900px) {
    .refer-rigester-wrapper {
      min-width: 100%;
    }
    .tenways-refer .text-reward {
      padding-right: 0;
    }
    .tenways-refer {
      display: block;
    }
    
    .text-reward p {
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; 
      padding-top: 0;
      margin: 0;
    }
    
    .refer-a-friend .text-reward .left .text {
      color: #FFF;
      text-align: center;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding: 0 4rem;
    }
    .refer-a-friend .text-reward .left .desc {
      color: #FFF;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }
    .tenways-refer .refer-reward {
      display: none;
    }
    
    .tenways-refer__button {
      text-align: center;
      display: block;
      margin-top: 1rem;
    }
    .product-popup-modal__for_signup .product-popup-modal__content {
      top: 50%;
      height: unset;
      transform: translate(-50%, -50%);
      border-radius: 12px;
      background: #fff;
      border: none;
      padding: 26px!important;
    }
    .refer-a-friend .product-popup-modal__toggle {
      padding-right: 1rem;
      top: 1rem;
    }
    .product-popup-modal__for_signup .product-popup-modal__content .refer-reward p {
      font-size: 14px;
    }
    .refer-a-friend .product-popup-modal__button-joinnow {
      background: transparent;
      border: 2px solid #fff;
      color: #fff;
    }
    .tenways-refer__button-logined .text-wrapper .text {
      color: #F4F8FC;
      text-align: center;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 48px; /* 200% */
      padding-bottom: 0;
    }
    .reward-register .product-popup-next {
      margin-left: 24px;
    } 
  }
</style>
<div class="bg_refer">
  <div id="refer-joinnow">
    <div class="bg-image">
      <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            alt="{{ section.settings.image.alt | escape }}"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
      <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image_mobile != blank -%}
          <img
            srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
              {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
            src="{{ section.settings.image_mobile | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
            alt="{{ section.settings.image_mobile.alt | escape }}"
            width="{{ section.settings.image_mobile.width }}"
            height="{{ section.settings.image_mobile.height }}"
          >
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
    <div class="refer-rigester-wrapper">
      <div class="page-width">
        <div class="tenways-refer">
          {% if customer %}
            <div class="tenways-refer__button-logined">
              <div class="text-reward logined">
                <div class="text-wrapper">
                  {% if section.settings.text != blank %}
                    <div class="text">{{ section.settings.login_text }}</div>
                  {% endif %}
                  {% if section.settings.button_label_2 != blank %}
                    <a class="button button--primary default-button"{% if section.settings.button_link_2 == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link_2 }}"{% endif %}>
                      {{ section.settings.button_label_2 | escape }}
                    </a> 
                  {% endif %}
                </div>
              </div>
            </div>
          {% else %}
            <div class="text-reward">
              <div class="left">
                {% if section.settings.text != blank %}
                  <div class="text">{{ section.settings.text }}</div>
                {% endif %}
                {% if section.settings.richtext != blank %}
                  <div class="desc">{{ section.settings.richtext }}</div>
                {% endif %}
              </div>
            </div>
            <div class="tenways-refer__button">
              {% if customer %}
                <div class="ten-button">
                  <a class="button button--primary default-button"{% if section.settings.button_link_2 == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link_2 }}"{% endif %}>
                    {{ section.settings.button_label_2 | escape }}
                  </a> 
                </div>
              {% else %}
                {%- if section.settings.button_label != blank -%}
                  <div class="ten-button ">
                    <modal-opener class="twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-refer-firend-for-signup" >
                      <button id="ProductPopup-{{ section.id }}" class="button twy-button product-popup-modal__button link" type="button" aria-haspopup="dialog">
                        {{ section.settings.button_label | escape }}
                      </button>
                    </modal-opener>
                    {% if section.settings.button_label_1 != blank %}
                      <modal-opener class="twy-button product-popup-modal__opener product-popup-next no-js-hidden" data-modal="#PopupModal-refer-firend-for-login" >
                        <button id="ProductPopup-{{ section.id }}" class="button twy-button product-popup-modal__button product-popup-modal__button-joinnow link" type="button" aria-haspopup="dialog">
                          {{ section.settings.button_label_1 | escape }}
                        </button>
                      </modal-opener>
                    {% endif %}
                  </div>
                {% endif %}
              {% endif %}
            </div>
            <div class="customer refer-reward">
              <p class="p">
                {{ section.settings.text_1 }}
                <modal-opener class="twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-refer-firend-for-login">
                  <button id="" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">
                  {{ section.settings.text_2 }}
                  </button>
                </modal-opener>
                <a class="" href="/account/login"></a>
              </p>
              {%- form 'create_customer', return_to: '/pages/loyalty-program-account' -%}
                {%- if form.errors -%}
                  <h2 class="form__message" tabindex="-1" autofocus>
                    <svg aria-hidden="true" focusable="false" role="presentation">
                      <use href="#icon-error" />
                    </svg>
                    {{ 'templates.contact.form.error_heading' | t }}
                  </h2>
                  <ul> 
                    {%- for field in form.errors -%}
                      <li>
                        {%- if field == 'form' -%}
                          {{ form.errors.messages[field] }}
                        {%- else -%}
                          <a href="#RegisterForm-{{ field }}">
                            {{ form.errors.translated_fields[field] | capitalize }}
                            {{ form.errors.messages[field] }}
                          </a>
                        {%- endif -%}
                      </li>
                    {%- endfor -%}
                  </ul>
                {%- endif -%}
                <div class="field">      
                  <input
                    type="text"
                    name="customer[first_name]"
                    id="RegisterForm-FirstName"
                    {% if form.first_name %}value="{{ form.first_name }}"{% endif %}
                    autocomplete="given-name"
                    placeholder="{{ 'customer.register.first_name' | t }}"
                  >
                  <label for="RegisterForm-FirstName">
                    {{ 'customer.register.first_name' | t }}
                  </label>
                </div>
                <div class="field">
                  <input
                    type="text"
                    name="customer[last_name]"
                    id="RegisterForm-LastName"
                    {% if form.last_name %}value="{{ form.last_name }}"{% endif %}
                    autocomplete="family-name"
                    placeholder="{{ 'customer.register.last_name' | t }}"
                  >
                  <label for="RegisterForm-LastName">
                    {{ 'customer.register.last_name' | t }}
                  </label>
                </div>
                <div class="field">      
                  <input
                    type="email"
                    name="customer[email]"
                    id="RegisterForm-email"
                    {% if form.email %} value="{{ form.email }}"{% endif %}
                    spellcheck="false"
                    autocapitalize="off"
                    autocomplete="email"
                    aria-required="true"
                    {% if form.errors contains 'email' %}
                      aria-invalid="true"
                      aria-describedby="RegisterForm-email-error"
                    {% endif %}
                    placeholder="{{ 'customer.register.email' | t }}"
                  >
                  <label for="RegisterForm-email">
                    {{ 'customer.register.email' | t }}
                  </label>
                </div>
                {%- if form.errors contains 'email' -%}
                  <span id="RegisterForm-email-error" class="form__message">
                    <svg aria-hidden="true" focusable="false" role="presentation">
                      <use href="#icon-error" />
                    </svg>
                    {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
                  </span>
                {%- endif -%}
                <div class="field">     
                  <input
                    type="password"
                    name="customer[password]"
                    id="RegisterForm-password"
                    aria-required="true"
                    {% if form.errors contains 'password' %}
                      aria-invalid="true"
                      aria-describedby="RegisterForm-password-error"
                    {% endif %}
                    placeholder="{{ 'customer.register.password' | t }}"
                  >
                  <label for="RegisterForm-password">
                    {{ 'customer.register.password' | t }}
                  </label>
                </div>
                {%- if form.errors contains 'password' -%}
                  <span id="RegisterForm-password-error" class="form__message">
                    <svg aria-hidden="true" focusable="false" role="presentation">
                      <use href="#icon-error" />
                    </svg>
                    {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.
                  </span>
                {%- endif -%}
                <div class="accepts-marketing">
                  <input
                    type="hidden"
                    name="customer[accepts_marketing]"
                    value="" />
                  <input
                    type="checkbox"
                    name="customer[accepts_marketing]"
                    checked />
                  <label for="accepts-marketing">
                    {%- if settings.accepts-marketing -%}
                      {{ section.settings.text_3 }}
                    {%- endif -%}
                  </label>
                </div>
                <button>
                  {{ section.settings.text_4 }} 
                </button>
              {%- endform -%}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  
  <modal-dialog id="PopupModal-refer-firend-for-signup" class="product-popup-modal product-popup-modal__for_signup">
    <div role="dialog" class="product-popup-modal__content" tabindex="-1">
      <div class="customer refer-reward">
        <p class="p">
          {{ section.settings.text_1 }}
          <modal-opener class="twy-button product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-refer-firend-for-login">
            <button id="sign-up-button" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">
            {{ section.settings.text_2 }}
            </button>
          </modal-opener>
          <a class="" href="/account/login"></a>
        </p>
        {%- form 'create_customer', return_to: '/pages/loyalty-program-account' -%}
          {%- if form.errors -%}
            <h2 class="form__message" tabindex="-1" autofocus>
              <svg aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-error" />
              </svg>
              {{ 'templates.contact.form.error_heading' | t }}
            </h2>
            <ul> 
              {%- for field in form.errors -%}
                <li>
                  {%- if field == 'form' -%}
                    {{ form.errors.messages[field] }}
                  {%- else -%}
                    <a href="#RegisterForm-{{ field }}">
                      {{ form.errors.translated_fields[field] | capitalize }}
                      {{ form.errors.messages[field] }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          {%- endif -%}
          <div class="field">      
            <input
              type="text"
              name="customer[first_name]"
              id="RegisterForm-FirstName"
              {% if form.first_name %}value="{{ form.first_name }}"{% endif %}
              autocomplete="given-name"
              placeholder="{{ 'customer.register.first_name' | t }}"
            >
            <label for="RegisterForm-FirstName">
              {{ 'customer.register.first_name' | t }}
            </label>
          </div>
          <div class="field">
            <input
              type="text"
              name="customer[last_name]"
              id="RegisterForm-LastName"
              {% if form.last_name %}value="{{ form.last_name }}"{% endif %}
              autocomplete="family-name"
              placeholder="{{ 'customer.register.last_name' | t }}"
            >
            <label for="RegisterForm-LastName">
              {{ 'customer.register.last_name' | t }}
            </label>
          </div>
          <div class="field">      
            <input
              type="email"
              name="customer[email]"
              id="RegisterForm-email"
              {% if form.email %} value="{{ form.email }}"{% endif %}
              spellcheck="false"
              autocapitalize="off"
              autocomplete="email"
              aria-required="true"
              {% if form.errors contains 'email' %}
                aria-invalid="true"
                aria-describedby="RegisterForm-email-error"
              {% endif %}
              placeholder="{{ 'customer.register.email' | t }}"
            >
            <label for="RegisterForm-email">
              {{ 'customer.register.email' | t }}
            </label>
          </div>
          {%- if form.errors contains 'email' -%}
            <span id="RegisterForm-email-error" class="form__message">
              <svg aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-error" />
              </svg>
              {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
            </span>
          {%- endif -%}
          <div class="field">     
            <input
              type="password"
              name="customer[password]"
              id="RegisterForm-password"
              aria-required="true"
              {% if form.errors contains 'password' %}
                aria-invalid="true"
                aria-describedby="RegisterForm-password-error"
              {% endif %}
              placeholder="{{ 'customer.register.password' | t }}"
            >
            <label for="RegisterForm-password">
              {{ 'customer.register.password' | t }}
            </label>
          </div>
          {%- if form.errors contains 'password' -%}
            <span id="RegisterForm-password-error" class="form__message">
              <svg aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-error" />
              </svg>
              {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.
            </span>
          {%- endif -%}
          <div class="accepts-marketing">
            <input
              type="hidden"
              name="customer[accepts_marketing]"
              value="" />
            <input
              type="checkbox"
              name="customer[accepts_marketing]"
              checked />
            <label for="accepts-marketing">
              {%- if settings.accepts-marketing -%}
                {{ section.settings.text_3 }}
              {%- endif -%}
            </label>
          </div>
          <button>
            {{ section.settings.text_4 }} 
          </button>
        {%- endform -%}
      </div>
      <button id="ModalClose-refer-firend-for-signup" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'twy-icon-close' %}</button>
    </div>
  </modal-dialog>
</div>
<script>
  $("#sign-up-button").on('click', () => {
    $('#ModalClose-refer-firend-for-signup').trigger('click');
  })
</script>
{% schema %}
  {
    "name": "refer register",
    "tag": "section",
    "class": "spaced-section reward-register",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image Mobile"
      },
      {
        "type": "text",
        "id": "text",
        "label": "Text"
      }, {
        "type": "richtext",
        "id": "richtext",
        "label": "Richtext"
      },
      {
        "type": "text",
        "id": "text_1",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "text_2",
        "label": "Text"
      },
       {
        "type": "text",
        "id": "text_3",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "text_4",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "login_text",
        "label": "login text",
        "default": "Refer a Friend NOW"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Join now button",
        "default": "Join now"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Join now url"
      },
      {
        "type": "text",
        "id": "button_label_1",
        "label": "Login button",
        "default": "Login"
      },
      {
        "type": "url",
        "id": "button_link_1",
        "label": "Login button url"
      },
      {
        "type": "text",
        "id": "button_label_2",
        "label": "Refer now button",
        "default": "Refer now"
      },
      {
        "type": "url",
        "id": "button_link_2",
        "label": "Refer now url"
      }
    ],
    "presets": [
      {
        "name": "Refer register"
      }
    ]
  }
{% endschema %}